<template>
	<view class="content">
		<view class="info_t">
			<view class="info_status">待支付</view>
			<view class="info_time">00：02：25后自动取消</view>
		</view>
		<view class="info_p">
			<view class="infobox">
				<view class="tit_l">
					<text class="status_cs">出售</text><text class="status_tit">USDT</text>
				</view>
				
				<view class="info_list_z">
					<view class="list_flex">
						<text>订单编号</text><text class="icon_c">TON20230728204957636353008</text>
					</view>
					<view class="list_flex">
						<text>任务类型</text><text>抢单模式</text>
					</view>
					<view class="list_flex">
						<text>订单金额</text><text>650.00USDT</text>
					</view>
					<view class="list_flex">
						<text>USDT单价</text><text>￥7.9</text>
					</view>
					<view class="list_flex">
						<text>回款金额</text><text style="color: #f9855c;">￥5135.00</text>
					</view>
					<view class="list_flex">
						<text>预估收益</text><text>￥422.50</text>
					</view>
					<view class="list_flex">
						<text>抢单费</text><text>2USDT</text>
					</view>
					<view class="list_flex">
						<text>服务费</text><text>13USDT</text>
					</view>
					<view class="list_flex">
						<text>匹配成功时间</text><text>2023-07-2820:49:57</text>
					</view>
				</view>
				
				<view class="info_list_z">
					<view class="list_flex">
						<text>结算时间</text><text>0-12小时</text>
					</view>
					<view class="list_flex">
						<text>结算类型</text><text>银行卡</text>
					</view>
					<view class="list_flex">
						<text>收款人姓名</text><text class="icon_c">狼</text>
					</view>
					<view class="list_flex">
						<text>收款账号</text><text class="icon_c">6213532514235682</text>
					</view>
					<view class="list_flex">
						<text>开户行</text><text>招商银行</text>
					</view>
				</view>
				
			</view>
			
			<view class="info_btn">
				<u-button type="primary" color="#53c393" text="重新付款" style="margin-right:10rpx;"></u-button>
				<u-button type="primary" color="#f9855c" text="取消订单" style="margin-left:10rpx;"></u-button>
			</view>
		</view>
		
		
		<botLine />
	</view>
</template>

<script>
	import botLine from '../../components/botLine.vue'
	export default {
		components:{
			botLine
		},
		data() {
			return {
				
			}
		},
		onLoad() {
	
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.content{
	height: 100vh;background-color: #f1f5f8;
	.info_t{
		background-color: #cccccc;padding:0 40rpx ;
		.info_status{line-height: 60rpx;color: #fff;font-size: 40rpx;padding-bottom: 20rpx;}
		.info_time{line-height: 40rpx;color: #e78d6b;font-size: 28rpx;padding-bottom: 10rpx;}
	}
	.info_p{
		padding: 20rpx;
		.infobox{
			border-radius:20rpx;background-color: #fff;margin-top: 20rpx;padding:0 20rpx;
			.tit_l{flex: 1;line-height: 70rpx;
				.status_cs{flex: 1;align-items: center;padding-right:10rpx;
					color: #53c393;line-height: 56rpx;font-size: 40rpx;font-weight: 600;	
				}
				.status_tit{flex: 1;
					color: #000;font-weight: 500;padding-right:70rpx;
					background: url(../../static/tabbar/u_icon.png) no-repeat 92rpx center;background-size: 20%;
				}
			}
			.info_list_z{
				padding: 10rpx 0;border-top: #d9d9d9 solid 1px;
				.list_flex{
					display: flex;line-height: 32rpx;height: 32rpx;font-size: 24rpx;padding: 10rpx 0;
					text:nth-child(1){
						flex: 1;color: #969696;
					}
					text:nth-child(2){
						flex: 1;text-align: right;
						&.icon_c{padding-right:40rpx;
							background: url(../../static/common/copy_icon.png) no-repeat right center;
							background-size: contain;
						}
					}
				}
			}
		}
		.info_btn{
			display: flex;margin-top: 50rpx;
		}
	}
	
}
</style>